{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:grid.html.twig' import gridWidth,gridNav,gridConfig %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import timebutton,searchtime,searchForm,searchFormBtn %}

{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@datepicker_css'
    '@jqgird_css'
    '@gritter_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
    <style>
        pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
        .string { color: green; }
        .number { color: darkorange; }
        .boolean { color: blue; }
        .null { color: magenta; }
        .key { color: red; }
    </style>
{% endblock %}

{% block content %}
    <h3 class="header smaller lighter green">推送日志:</h3>
    <p></p>
    <table class="table table-bordered table-hover no-padding">
        <tbody>
        <tr>
            <td class="col-xs-2 align-right align-middle" style="border-right-width: 0px;">
                <label>客户电话:</label>
            </td>
            <td class="col-xs-4" style="border-left-width: 0px;">
                <div class="row" style="margin-right: 0">
                    <div class="col-sm-6">
                        <input type="text" class="col-sm-12" id="phone" placeholder="" value="">
                    </div>
                </div>
            </td>
            <td class="col-xs-3" style="border-right-width: 0px;">
                <div  class="row col-sm-4 align-right align-middle" style="margin:8px 1px 0 0;">
                    <label>推送结果:</label>
                </div>
                <div class="row col-sm-8" style="margin-right: 0">
                    <select id="sendRes" name="sendRes" class="col-xs-12 col-sm-12">
                        <option value="">全部</option>
                        <option value="1" >成功</option>
                        <option value="2" >失败</option>
                        <option value="3" >推送中</option>
                        <option value="4" >重推中</option>
                    </select>
                </div>
            </td>
            <td class="col-xs-3" style="border-left-width: 0px;">
                <div  class="row col-sm-4 align-right align-middle" style="margin:8px 1px 0 0;">
                    <label>推送类型:</label>
                </div>
                <div class="row col-sm-8" style="margin-right: 0">
                    <select id="sendType" name="sendType" class="col-xs-12 col-sm-12">
                        <option value="">全部</option>
                        <option value="1" >挂机推送</option>
                        <option value="2" >接通推送</option>
                    </select>
                </div>
            </td>
        </tr>
        {#<tr>
            <td class="col-xs-2 align-right align-middle" style="border-right-width: 0px;">
                <label for="start_time">开始时间:</label>
            </td>
            <td class="col-xs-4" style="border-left-width: 0px;">
                <div class="row" style="margin-right: 0">
                    <div class="col-sm-6">
                        <input type="text" class="col-sm-12" id="start_time" placeholder="" value="">
                    </div>
                </div>
            </td>
            <td class="col-xs-2 align-right align-middle" style="border-right-width: 0px;">
                <label for="end_time">结束时间:</label>
            </td>
            <td class="col-xs-4" style="border-left-width: 0px;">
                <div class="row" style="margin-right: 0">
                    <div class="col-sm-6">
                        <input type="text" class="col-sm-12" id="end_time" placeholder="" value="">
                    </div>
                </div>

            </td>
        </tr>#}
        <tr>
            <td colspan="4" class="text-center">
                <button id="loading-btn" onclick="search()" class="btn btn-info btn-sm">
                    <i class="ace-icon fa fa-search"></i> 查询
                </button>
                <button id="loading-btn"  class="btn btn-pink btn-sm" onclick="resetBtn()">
                    <i class="ace-icon fa fa-undo"></i> 重 置
                </button>
            </td>
        </tr>
        </tbody>
    </table>
    <table id="grid-table"></table>
    <div id="grid-pager"></div>
    <button class="btn btn-primary btn-round align-middle btn-sm" onclick="repush()">
        <i class="ace-icon glyphicon glyphicon-refresh"></i>
        重新推送失败记录
        <i class="ace-icon fa fa-arrow-right icon-on-right"></i>
    </button>
    <div id="json_res" style="width: 500px;height: 600px;">
    </div>
{% endblock %}

{% block footer %}
    {% javascripts
    '@datepicker_js'
    '@jqgird_js'
    '@gritter_js'
    '@common_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        var phone = '';
        var sendRes = '';
        var startTime = '';
        var endTime = '';
        var sendType = '';
        $(function () {
            $('#start_time').datetimepicker({locale:'zh-cn',format:'YYYY-MM-DD HH:mm:ss',widgetPositioning:{horizontal:'left'}});
            $('#end_time').datetimepicker({locale:'zh-cn',format:'YYYY-MM-DD HH:mm:ss',widgetPositioning:{horizontal:'left'}});
        });
        jQuery(function($) {
            {{ gridWidth() }}
            getCondition();
            jQuery(grid_selector).jqGrid({
                caption: "推送日志",
                url: "{{ path('icsoc_security_develop_call_record_data') }}",
                mtype: 'POST',
                datatype: "json",
                hidegrid:false,
                height: '100%',
                colModel:[
                    {name : "id", index:'id', title : false, formatter : actFormatter, label: '操作' , width:100, sortable:false},
                    {name:'send_start_time' , index:'send_start_time' , label: '推送开始时间' , width:140 , sortable:true , fixed:true},
                    {name:'send_end_time' , index:'send_end_time' , label: '推送结束时间' , width:140 , sortable:true , fixed:true},
                    {name:'send_res' , index:'send_res' , label: '推送结果' , width:80 , sortable:true , fixed:true},
                    {name:'call_type' , index:'call_type' , label: '通话类型' , width:80 , sortable:true },
                    {name:'cus_phone' , index:'cus_phone' , label: '客户电话' ,width:120, sortable:true },
                    {name:'call_start_time' , index:'call_start_time' , label: '开始时间' ,width:130, sortable:true },
                    {name:'call_end_time' , index:'call_end_time' , label: '结束时间' ,width:130, sortable:true },
                    {name:'send_type' , index:'send_type' , label: '推送类型' ,width:110, sortable:true },
                    {name:'send_params' , index:'send_params' , hidden:true }
                ],
                {{ gridConfig() }}
                rowNum:10,
                rowList: [10,20,30,50,100],
                rownumWidth: 40,
                viewrecords: true,
                sortname:"id",
                sortorder:'desc',
                multiselect: false,
                rownumbers: true
            });
            {{ gridNav(false,false,false,false,true,false) }}
            function actFormatter(cellvalue, options, rawObject) {
                var detail = '<input type="button" class="btn btn-white btn-primary" value="推送参数" onclick="showCustomDetail(\''
                        + options.rowId +'\')">';
                return "&nbsp;&nbsp;&nbsp;\t" + detail + "&nbsp;&nbsp;&nbsp;\t";
            }
        });

        //搜索
        function search()
        {
            getCondition();
            $('#grid-table').setGridParam({
                page:1,
                postData:{'phone':phone, 'startTime':startTime, 'endTime':endTime, 'sendRes':sendRes, 'sendType':sendType}
            }).trigger("reloadGrid");
        }

        //重置
        function resetBtn()
        {
            startTime = $('#start_time').val('');
            endTime = $('#end_time').val('');
            phone = $('#phone').val('');
            sendRes = $('#sendRes').val('');
            sendType = $('#sendType').val('');
            search();
        }

        function getCondition()
        {
            startTime = $('#start_time').val();
            endTime = $('#end_time').val();
            phone = $('#phone').val();
            sendRes = $('#sendRes').val();
            sendType = $('#sendType').val();
        }

        function showCustomDetail(rowId) {
            var str = $('#grid-table').getCell(rowId, 'send_params');
            $('#json_res').html(syntaxHighlight("<pre>"+str+"</pre>"));
        }

        function syntaxHighlight(json) {
            if (typeof json != 'string') {
                json = JSON.stringify(json, undefined, 2);
            }
            json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
            return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
                var cls = 'number';
                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = 'key';
                    } else {
                        cls = 'string';
                    }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean';
                } else if (/null/.test(match)) {
                    cls = 'null';
                }
                return '<span class="' + cls + '">' + match + '</span>';
            });
        }

        function repush()
        {
            $.ajax({
                type: 'get',
                url: '{{ path('icsoc_security_develop_repush_call') }}',
                success: function (response) {
                    if (response.error) {
                        gritterAlert('{{ 'Prompt'|trans }}', response.msg, 'error');
                    } else {
                        gritterAlert('{{ 'Prompt'|trans }}', response.msg, 'success');
                    }
                }
            })
        }
    </script>
{% endblock %}